<!--
# Copyright (c) 2025 Arfa Digital Consulting
# This program and the accompanying materials
# are made available under the terms of the Eclipse Public License 2.0
# which accompanies this distribution, and is available at
# https://www.eclipse.org/legal/epl-2.0/
#
# SPDX-License-Identifier: EPL-2.0
#
# Contributors:
#    Benjamin Arfa - initial API and implementation
-->

{% extends 'base.html' %}
{% load static %}

{% block title %}Create DPM Output Layers{% endblock %}

{% block extra_css %}
<style>
    .form-container {
        max-width: 600px;
        margin: 50px auto;
        padding: 30px;
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: #333;
    }

    .form-group input,
    .form-group select {
        width: 100%;
        padding: 10px;
        border: 1px solid #ced4da;
        border-radius: 4px;
        font-size: 16px;
    }

    .form-group input:focus,
    .form-group select:focus {
        outline: none;
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    }

    .form-help {
        margin-top: 5px;
        font-size: 14px;
        color: #6c757d;
    }

    .button-group {
        display: flex;
        gap: 10px;
        margin-top: 30px;
    }

    .btn {
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        font-size: 16px;
        cursor: pointer;
        text-decoration: none;
        display: inline-block;
        text-align: center;
        transition: all 0.3s ease;
    }

    .btn-primary {
        background-color: #007bff;
        color: white;
    }

    .btn-primary:hover {
        background-color: #0056b3;
    }

    .btn-secondary {
        background-color: #6c757d;
        color: white;
    }

    .btn-secondary:hover {
        background-color: #5a6268;
    }

    .loading-spinner {
        display: none;
        text-align: center;
        margin-top: 20px;
    }

    .results {
        display: none;
        margin-top: 30px;
        padding: 20px;
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 4px;
    }

    .results.success {
        border-color: #28a745;
        background-color: #d4edda;
    }

    .results.error {
        border-color: #dc3545;
        background-color: #f8d7da;
    }
</style>
{% endblock %}

{% block content %}
<h1 style="text-align: center;">Create DPM Output Layers</h1>

<div class="form-container">
    <form id="outputLayerForm">
        <div class="form-group">
            <label for="framework">Framework:</label>
            <select id="framework" name="framework">
                <option value="">-- Select a framework --</option>
                {% for fw in frameworks %}
                <option value="{{ fw }}">{{ fw }}</option>
                {% endfor %}
            </select>
            <div class="form-help">Select a framework to process all its tables</div>
        </div>

        <div class="form-group">
            <label for="version">Version (Optional):</label>
            <select id="version" name="version">
                <option value="">-- All versions --</option>
                {% for ver in versions %}
                <option value="{{ ver }}">{{ ver }}</option>
                {% endfor %}
            </select>
            <div class="form-help">Select a specific DPM version, or leave empty for all versions</div>
        </div>

        <div class="form-group">
            <label for="table_code">OR Table Code:</label>
            <input type="text" id="table_code" name="table_code" placeholder="e.g., EBA_FINREP_F_01_01">
            <div class="form-help">Enter a specific table code to process only that table</div>
        </div>

        <div class="button-group">
            <button type="submit" class="btn btn-primary">Create Output Layers</button>
            <a href="{% url 'pybirdai:dpm_data' %}" class="btn btn-secondary">Back</a>
        </div>
    </form>

    <div class="loading-spinner">
        <img src="{% static 'images/loading.gif' %}" alt="Loading..." width="50">
        <p>Creating output layers... This may take a few minutes.</p>
    </div>

    <div id="results" class="results"></div>
</div>

<script>
document.getElementById('outputLayerForm').addEventListener('submit', async function(e) {
    e.preventDefault();

    const framework = document.getElementById('framework').value;
    const tableCode = document.getElementById('table_code').value;
    const version = document.getElementById('version').value;

    if (!framework && !tableCode) {
        alert('Please select a framework or enter a table code.');
        return;
    }

    // Show loading spinner
    document.querySelector('.loading-spinner').style.display = 'block';
    document.getElementById('results').style.display = 'none';

    // Build URL with parameters
    let url = '{% url "pybirdai:dpm_output_layer_creation" %}?execute=true';
    if (framework) url += '&framework=' + encodeURIComponent(framework);
    if (tableCode) url += '&table_code=' + encodeURIComponent(tableCode);
    if (version) url += '&version=' + encodeURIComponent(version);

    try {
        const response = await fetch(url);
        const data = await response.json();

        // Hide loading spinner
        document.querySelector('.loading-spinner').style.display = 'none';

        // Show results
        const resultsDiv = document.getElementById('results');
        resultsDiv.style.display = 'block';

        if (data.status === 'success') {
            resultsDiv.className = 'results success';
            let html = '<h3>Success!</h3>';

            if (data.processed && data.processed.length > 0) {
                html += '<p>Created output layers for ' + data.processed.length + ' table(s):</p>';
                html += '<ul>';
                data.processed.forEach(item => {
                    html += '<li>' + (item.table_id || item.table_code) + '</li>';
                });
                html += '</ul>';
            }

            if (data.errors && data.errors.length > 0) {
                html += '<p>Errors encountered for ' + data.errors.length + ' table(s):</p>';
                html += '<ul>';
                data.errors.forEach(item => {
                    html += '<li>' + item.table + ': ' + item.error + '</li>';
                });
                html += '</ul>';
            }

            resultsDiv.innerHTML = html;
        } else {
            resultsDiv.className = 'results error';
            resultsDiv.innerHTML = '<h3>Error</h3><p>' + (data.message || 'An error occurred') + '</p>';
        }
    } catch (error) {
        // Hide loading spinner
        document.querySelector('.loading-spinner').style.display = 'none';

        // Show error
        const resultsDiv = document.getElementById('results');
        resultsDiv.style.display = 'block';
        resultsDiv.className = 'results error';
        resultsDiv.innerHTML = '<h3>Error</h3><p>An error occurred: ' + error.message + '</p>';
    }
});
</script>
{% endblock %}
